<template>
  <view class="content">
    <!-- <u-grid :col="1"> -->
    <view class="top">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        :font-size="200"
      ></u-tabs>
    </view>

    <view class="list">
      <view v-for="(item, keys) in menu.menu[0]" :key="keys">
        <view
          v-if="keys < 39 && current == 0"
          class="grid-text1"
          @click="Tochapter(keys)"
          >{{ item }}</view
        >
        <view
          v-if="keys >= 39 && current == 1"
          class="grid-text2"
          @click="Tochapter(keys)"
          >{{ item }}</view
        >
      </view>
    </view>

    <!-- </u-grid> -->

    <!-- {{menu.menu[0]}} -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      menu: "",
      list: [
        {
          name: "旧约",
        },
        {
          name: "新约",
        },
      ],
      current: 0,
    };
  },
  onLoad() {
    this.menu = require("../../static/json/json_sjsy.json");
    // console.log("menu: " + JSON.stringify(this.menu.menu));
  },
  methods: {
    change(index) {
      // console.log(index);
      this.current = index.index;
    },
    Tochapter(row) {
      // console.log(row);
      var list = { row: row };
      // console.log(list);
      uni.navigateTo({
        url: "../detail/chapter?row=" + Number(row + 1),
      });
    },
  },
};
</script>

<style scoped>
/* @import url("@/common/less/page/index.less"); */
.content {
  /* position: relative; */
}
.top {
  position: fixed;
  width: 100%;
  background: white;
  box-shadow: 0px 15px 10px -15px #000;
}
.list {
  padding: 20rpx;
  padding-top: 100rpx;
  font-size: 30rpx;
}
.grid-text1 {
  padding-top: 20rpx;
}
.grid-text2 {
  padding-top: 20rpx;
}
</style>
